
<template>
  <div class="table-box">
    <!-- 表格主体 -->
    <div class="card table-main">
      <!-- 表格头部 操作按钮 -->
      <div class="table-header">
        <div class="header-button-lf">
          <!-- 新增 -->
          <el-button type="primary" icon="CirclePlus" @click="add">新增</el-button>
        </div>
        <div class="header-button-ri">
          <slot name="toolButton">
            <!-- <el-button icon="Search" circle @click="isShowSearch = !isShowSearch"/> -->
          </slot>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :selectable="selectable" align="center" />
        <el-table-column property="name" label="账户名" show-overflow-tooltip >
          <template #default="scope">
            <span>{{ scope.row.name+' '+scope.row.securities_name+' '+scope.row.account_id }}</span>
          </template>
        </el-table-column>
        <el-table-column property="tradable_sectors" label="可交易板块" width="400">
          <template #default="scope">
            <div class="tradable-sectors">
              <div :style="{ color: scope.row.tradable_sectors.includes('主板') ? '#2e92fb' : '' }">主板</div>
              <div :style="{ color: scope.row.tradable_sectors.includes('创业板') ? '#2e92fb' : '' }">创业板</div>
              <div :style="{ color: scope.row.tradable_sectors.includes('科创板') ? '#2e92fb' : '' }">科创板</div>
              <div :style="{ color: scope.row.tradable_sectors.includes('北交所') ? '#2e92fb' : '' }">北交所</div>
              <div :style="{ color: scope.row.tradable_sectors.includes('ST股') ? '#2e92fb' : '' }">ST股</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="total_assets" label="账户总资产" width="150">
          <template #default="scope">
            <span v-if="scope.row.total_assets">￥{{ scope.row.total_assets }}</span>
          </template>
        </el-table-column>
        <el-table-column property="available_funds" label="可用资金" width="150">
          <template #default="scope">
            <span v-if="scope.row.total_assets">￥{{ scope.row.available_funds }}</span>
          </template>
        </el-table-column>
        <el-table-column property="buy_ratio" label="本期购买比例" width="150">
          <template #default="scope">
            <span>{{ scope.row.buy_ratio }}%</span>
          </template>
        </el-table-column>
        <el-table-column property="status" label="账户状态" width="150">
          <template #default="scope">
            <span v-if="scope.row.status=='1'" style="color: #2e92fb;">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column property="createdAt" label="密钥" width="120">
          <template #default="scope">
            <el-button type="primary" link @click="view(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="120">
          <template #default="scope">
            <el-button type="primary" link @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" link @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Add ref="AddRef" @addSave="addSave"></Add>
    <Edit ref="EditRef" @editSave="editSave"></Edit>
    <View ref="ViewRef"></View>
  </div>
</template>

<script setup lang="ts" name="11100">
import { ref, reactive, onMounted, watch } from "vue";
import { accountSaveApi, accountListApi, accountEditApi, accountDelApi } from "@/api/modules/account";
// 新增、编辑、查看
import Add from "./components/add.vue";
import Edit from "./components/edit.vue";
import View from "./components/view.vue";
import { ElMessage,ElMessageBox } from "element-plus";

const listQuery = reactive({
  page: 1, // 当前页数
  pageSize: 20, // 每页显示条数
  order: 'desc',
  column: 'createdAt'
})
// 总条数
const total = ref(0)
// 每页条数发生改变
const handleSizeChange = (val) => {
  listQuery.pageSize = val
  getTableList()
}
// 页码发生改变
const handleCurrentChange = (val) => {
  listQuery.page = val
  getTableList()
}

// 初始化表格数据
onMounted(() => {
  getTableList();
});
let tableData = ref()
const getTableList = () => {
  accountListApi().then((res:any) => {
    tableData.value = res.data.data
    total.value = res.data.totalCount
  })
};

// 新增编辑
let AddRef = ref()
const add = () => {
  AddRef.value.open({title: '新增',disabled: false})
}
// 新增保存
const addSave = (form) => {
  accountSaveApi(form).then((res:any) => {
    if(res.success) {
      ElMessage.success('新增成功！')
      AddRef.value.close()
      getTableList()
    }
  })
}
let EditRef = ref()
// 编辑
const edit = (row) => {
  EditRef.value.edit({title: '编辑', form: row,  disabled: true})
}
// 新增保存
const editSave = (form) => {
  accountEditApi(form.account_id,form).then((res:any) => {
    if(res.success) {
      ElMessage.success('编辑成功！')
      EditRef.value.close()
      getTableList()
    }
  })
}
const del = (row) => {
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    accountDelApi(row.account_id).then((res:any) => {
      if(res.success) {
        ElMessage.success('删除成功！')
        getTableList()
      }
    })
  })
}
const ViewRef = ref()
// 查看
const view = (row) => {
  ViewRef.value.view({title: '查看', form: {...row}})
}

const ids = ref([]); // 选中数组
const multiple = ref<boolean>(true); // 批量删除禁用
const handleSelectionChange = (selection: any) => {
  ids.value = selection.map((item: any) => item.id);
  multiple.value = !selection.length;
};
const selectable = (row) => {
  if(row.activeFlag === 'Y') {
    return false
  } return true
}
</script>
<style lang="scss" scoped>
.tradable-sectors {
  display: flex;
  align-items: center;
  div {
    margin-right: 10px;
  }
}
</style>
